<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>焦点图</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.main {
				position: relative;
				margin-top: 50px;
				height: 425px;
			}

			a>img {
				height: 425px;
				/* css图片剪裁居中 */
				display: block;
				width: 100%;
				/* object-fit:CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 */
				/*  */
				/* object-fit: cover; */
			}

			ul {
				width: 150px;
				height: 20px;
				border-radius: 25px;
				position: absolute;
				bottom: 0;
				left: calc(50vw - 50px);
				margin-bottom: 20px;
				z-index: 1;
				/* rgba() 具有一定透明度的盒子*/
				/* 使用 opacity，所有子元素都会受到影响 */
				background-color: rgba(0, 0, 0, 0.2);
				display: flex;
				flex-direction: row;
				justify-content: center;
			}

			li {
				list-style: none;
				height: 10px;
				width: 10px;
				background-color: aliceblue;
				border-radius: 100%;
				cursor: pointer;
				opacity: 1;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div>
				<a href="">
					<img src="https://assets.bdqn.cn/upload/ad/1657591998577142.jpg?1670373259" />
				</a>
			</div>
			<ul>
				<li style="background-color: #40BBCD;"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
